<template>
  <view class="TopicRule">
    <view class="head flex flex-row between">
      <view class="title">抽取试题内容</view>
      <view class="score" v-if="practiceType!=='2'">试卷共计：<label>{{ sumData.sumNum }}</label>
        题&nbsp;&nbsp;总计：<label>{{ sumData.sumScore }}</label> 分
      </view>
    </view>
    <view style="height: 3px" class="line"></view>
    <view class="top-list">
      <view class="head flex flex-row ">
        <view class="f_1">题型</view>
        <view class="score">{{columnName}}</view>
        <view class="operate">操作</view>
      </view>
      <view class="body">
        <view class="flex flex-row item" v-for="(item,index) in list" :key="index">
          <view class="flex flex-row title f_1">
            <u-icon name="minus-circle" color="red" size="22" @click="remove(index)"></u-icon>
            <view style="margin-left: 6px">{{ item.topicTypeLabel }}</view>
          </view>
          <view class="score">{{ practiceType == '2' ? item.num : item.score }}{{ unitMap[columnName] }}</view>
          <view class="operate flex flex-row between">
            <view @click="moveUp(index)">上移</view>
            <view @click="moveDown(index)">下移</view>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>
<script>
export default {
  name: "TopicList",
  inject: ['prop_practice', "pro_practiceType"],
  props: {
    list: {
      type: Array,
      default: () => []
    },
    columnName:{
      type: String,
      default: "分值"
    }
  },
  computed: {
    practiceType() {
      return this.pro_practiceType();
    },
    sumData() {
      let sumNum = 0;
      let sumScore = 0;
      if (this.practiceType !== '2') {
        this.list.forEach(item => {
          sumNum += parseInt(item.cnt);
          sumScore += parseInt(item.cnt) * parseFloat(item.score);
        });
      }
      return {sumNum, sumScore};
    }
  },
  data() {
    return {
      unitMap:{
        "分值":"",
        "比列":"%",
        "数量":"道",
      }
    }
  },
  methods: {
    remove(index) {
      this.$emit("remove", index);
    },
    moveUp(index) {
      this.$emit("moveUp", index);
    },
    moveDown(index) {
      this.$emit("moveDown", index);
    },
  },
}
</script>
<style scoped lang="scss">
.TopicRule {
  border-top-right-radius: 24rpx;
  border-top-left-radius: 24rpx;
  background-color: #FFFFFF;
  padding-top: 21px;

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .head {
    padding: 0 20px 16px 23px;

    .title {
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .score {
      color: #333333;
      font-size: 28rpx;

      label {
        color: #37B874;
      }
    }
  }

  .top-list {
    .head {
      color: #999999;
      font-size: 32rpx;
      padding: 20px 23px;
      border-bottom: 1px solid #EEEEEE;
    }

    .operate, .score {
      width: 84px;
      text-align: center;
      color: #999999;
      font-size: 32rpx
    }

    .operate {
      text-align: left !important;
    }
  }

  .body {
    font-size: 32rpx;
    color: #333333;

    .operate, .score {
      width: 84px;
      text-align: center;
      color: #333333;
      font-size: 32rpx
    }

    .item {
      border-bottom: 1px solid #EEEEEE;
      padding: 18px 23px;
    }

    .operate {
      color: #37B874;
    }
  }
}

</style>